/* Header bar's URL bar */

@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

#search-container,
toolbarspring {
	display: none !important;
}

/* URL bar */
#urlbar {
	--urlbar-height: 32px !important;
	--urlbar-container-height: 32px !important;
	--urlbar-toolbar-height: 32px !important;
	--urlbar-inner-padding: 0 !important;
	--urlbar-width: 360px !important;
	box-shadow: none !important;
	width: 360px !important;
	min-width: 360px !important;
}

#urlbar[focused="true"]:not([suppress-focus-border]) > #urlbar-background,
#urlbar[focused="true"]:not([suppress-focus-border]) > .urlbar-background {
	outline-color: transparent !important;
}

#urlbar-container,
.urlbar-container,
#wrapper-urlbar-container,
.wrapper-urlbar-container,
#urlbar #urlbar-input-container,
#urlbar .urlbar-input-container {
	padding: 0 !important;
	width: 360px !important;
	min-width: 360px !important;
}

:root[sizemode="maximized"] #urlbar,
:root[sizemode="maximized"] #urlbar-container,
:root[sizemode="maximized"] #wrapper-urlbar-container,
:root[sizemode="maximized"] .urlbar-container,
:root[sizemode="maximized"] .wrapper-urlbar-container {
	width: 360px !important;
	min-width: 360px !important;
}

#urlbar-background,
.urlbar-background {
	box-shadow: none !important;
	border: none !important;
	background: none !important;
	border-radius: 8px !important;
}

#urlbar[breakout][breakout-extend] {
	width: 360px !important;
	z-index: 5 !important;
	padding: 0 !important;
	border-radius: 8px !important;
	outline: 2px solid var(--gnome-focused-urlbar-border-color) !important;
	outline-offset: -2px;
	-moz-outline-radius: 8px;
	transition: outline 100ms ease-out;
}

#urlbar[breakout][breakout-extend][open] {
	height: auto !important;
	max-height: unset !important;
}

#urlbar[breakout][breakout-extend] #urlbar-input-container,
#urlbar[breakout][breakout-extend] .urlbar-input-container {
	height: 32px !important;
	max-height: 32px !important;
	padding: 0 !important;
}

#urlbar:-moz-window-inactive {
	border-color: var(--gnome-inactive-headerbar-background) !important;
}

#urlbar-input,
.urlbar-input {
	text-align: center !important;
	padding: 0 28px 0 0 !important;
}

/* URL bar results */
.urlbarView {
	background: var(--gnome-popover-background) !important;
	color: var(--gnome-toolbar-color) !important;
	margin: 6px 0 0 0 !important;
	width: 100% !important;
	position: absolute !important;
	box-shadow: var(--gnome-urlbar-box-shadow) !important;
	border-radius: 12px !important;
	border: 0 !important;
}

@media (prefers-color-scheme: dark) {
	.urlbarView {
		border: 1px solid rgba(255, 255, 255, 0.1) !important;
	}
}

.urlbarView-body-outer {
	--item-padding-start: 0 !important;
	--item-padding-end: 0 !important;
	max-height: 40vh !important;
	overflow-x: auto;
	padding: 0 6px !important;
}

.urlbarView-body-inner {
	border: 0 !important;
}

.urlbarView-row-inner, .urlbarView-no-wrap  {
	align-items: center !important;
}
.urlbarView-row-inner {
	padding-block: 5px !important;
	border-radius: 5px !important;
}
.urlbarView-action {
	background: transparent !important;
}
/* Search engines buttons */
.search-one-offs {
	margin: 0 0 2px !important;
	padding: 8px !important;
	background: var(--gnome-popover-background) !important;
	border-top: 1px solid var(--gnome-button-border-color) !important;
	border-radius: 0 0 8px 8px !important;
}

.searchbar-engine-one-off-item {
	--toolbarbutton-active-background: var(--gnome-headerbar-button-active-background) !important;
	--toolbarbutton-hover-background: var(--gnome-headerbar-button-hover-background) !important;
	-moz-appearance: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	min-height: 32px !important;
	min-width: 32px !important;
	margin: 0 !important;
}

.searchbar-engine-one-off-item:hover, .searchbar-engine-one-off-item[selected] {
	background: var(--gnome-headerbar-button-hover-background) !important;
	color: unset !important;
}

#urlbar-anon-search-settings-compact {
	border: none !important;
	border-radius: 5px;
	margin-left: 6px !important;
}

#identity-box[pageproxystate="invalid"] > .identity-box-button,
#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] > .identity-box-button {
	padding-inline: 6px !important;
}

/* URL bar and Search bar */
#urlbar[focused],
#searchbar:focus-within {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

#urlbar[focused] .urlbar-textbox-container {
	margin: -1px !important;
}
#searchbar > .searchbar-textbox[focused] .searchbar-search-button {
	margin-left: -1px !important;
}
#searchbar > .searchbar-textbox[focused] .search-go-button {
	margin-right: -1px !important;
}

/* URL bar and Search bar's icons */
.urlbar-icon-wrapper:hover,
.urlbar-icon-wrapper[open],
.urlbar-icon:hover:active,
.urlbar-icon-wrapper:hover:active,
.searchbar-search-button:hover .searchbar-search-icon,
.searchbar-search-button[open] .searchbar-search-icon,
.searchbar-search-button:hover:active .searchbar-search-icon {
	background-color: transparent !important;
	fill-opacity: 1 !important;
}

#notification-popup-box {
	height: 26px !important;
	border-radius: 5px !important;
}

.urlbar-page-action,
#urlbar-go-button,
.urlbar-go-button,
.search-go-button,
#tracking-protection-icon-container {
	width: 28px !important;
	height: 26px !important;
	margin: 3px 0 !important;
	padding: 4px 6px !important;
	border-radius: 5px !important;
}

#identity-box {
	margin: 3px 2px !important;
	border-radius: 5px !important;
}

#identity-box[pageproxystate="valid"].chromeUI {
	margin-left: 0 !important;
}

#tracking-protection-icon-container:hover,
.urlbar-page-action:hover,
#urlbar-go-button:hover,
.urlbar-go-button:hover,
.search-go-button:hover,
#identity-box:hover {
	background: var(--gnome-headerbar-button-hover-background) !important;
}

#tracking-protection-icon-container:active,
#tracking-protection-icon-container[open="true"],
.urlbar-page-action:active,
#urlbar-go-button:active,
.urlbar-go-button:active,
.search-go-button:active,
#identity-box:active {
	background: var(--gnome-headerbar-button-active-background) !important;
}

.identity-box-button {
	border-radius: 5px !important;
	background: none !important;
}

#identity-box.extensionPage #identity-icon-label {
	visibility: collapse !important;
}

/* Search mode switcher */
#nav-bar #urlbar toolbarbutton#urlbar-searchmode-switcher:not(#urlbar-zoom-button):not(.subviewbutton):not(.titlebar-button):not(.close-button) {
	appearance: none;
	border-radius: 5px !important;
	margin-top: 3px !important;
	margin-bottom: 3px !important;
	margin-inline-start: 0 !important;
	margin-inline-end: var(--urlbar-searchmodeswitcher-margin-inline-end);
	padding-inline: var(--urlbar-searchmodeswitcher-inline-padding);
	min-width: 50px !important;
	min-height: 26px !important;

  &.close-button {
	margin-left: 6px !important;
  }

  &:focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-outline-inset);
  }

  &[open] {
	background-color: var(--urlbar-box-focus-bgcolor) !important;
  }

  /* No need space if page information icons such as lock and shield is shown */
  #urlbar[pageproxystate=valid] & {
	margin-inline-end: 0;
  }

  #urlbar[searchmode] & {
	background-color: var(--urlbar-box-bgcolor) !important;
	margin-inline-end: 0 !important;
	border-start-end-radius: 0 !important;
	border-end-end-radius: 0 !important;
	min-width: 32px !important;
  }

  /* The background rule should match to #searchmode-switcher-chicklet */
  #urlbar[focused] & {
	background-color: var(--urlbar-box-focus-bgcolor) !important;
  }

  /* stylelint-disable media-query-no-invalid */
  @media (not -moz-pref("browser.urlbar.searchModeSwitcher.featureGate")) and
         (not -moz-pref("browser.urlbar.scotchBonnet.enableOverride")) {
	display: none;
  }
}

#searchmode-switcher-chicklet {
	background-color: var(--urlbar-box-bgcolor);
	border-start-end-radius: 5px !important;
	border-end-end-radius: 5px !important;
	align-items: center;
	height: 26px !important;
	margin-inline-end: var(--urlbar-searchmodeswitcher-margin-inline-end);
	display: none;
	margin-top: 3px;
	margin-bottom: 3px;
}

#urlbar-search-mode-indicator-close, #searchmode-switcher-close {
	margin-left: 6px !important;
}

.urlbar-page-action {
	padding: 5px 6px !important;
}

/* Search mode indicator */
#urlbar-search-mode-indicator,
#urlbar-label-box {
	background: var(--gnome-headerbar-button-hover-background) !important;
	border: none !important;
	border-radius: 5px !important;
	outline: 0 !important;
	margin-top: 3px !important;
	margin-bottom: 3px !important;
}
#urlbar-search-mode-indicator-title {
	padding-inline: 4px !important;;
}
#urlbar-search-mode-indicator-close {
	background-size: 12px 12px !important;
	border-radius: 3px !important;
	opacity: 0.8 !important;
	fill: var(--gnome-toolbar-color) !important;
}

/*translations-button*/
#translations-button[translationsactive] > #translations-button-icon {
  fill: var(--theme-primary-active-color) !important;
  fill-opacity: 1;
}

#translations-button-circle-arrows {
  height: 16px;
  width: 16px;
  list-style-image: url("chrome://browser/skin/sync.svg");
  fill: var(--theme-primary-active-color) !important;
  fill-opacity: 1;
  margin-inline: 1px;
}

#translations-button-locale {
  background-color: var(--theme-primary-active-color) !important;
  color: white !important;
  border-radius: 4px;
  font-size: 0.8em;
  height: 20px;
  min-width: 20px;
  text-align: center;
  padding-top: 3px;
  padding-inline: 1px;
  box-sizing: border-box;
  margin-inline: 2px -2px;
  margin-block: -2px;
}

#translations-button[translationsactive="true"] {
  width: auto !important;
}
